/**
 * 泛娱区块链 - PointGoodsItem
 * http://menger.me
 * @大梦
 */

'use strict';

import React from 'react'
import {StyleSheet, Text, TouchableOpacity, View,} from 'react-native'
import ImageView from "../common/ImageView";
import Button from "../common/Button";

export default class PointGoodsItem extends React.PureComponent {

    static defaultProps = {
        item: {},
    };

    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
    }

    render() {
        let {item, style, onPress, onPressSubmit} = this.props;
        if (item.goods_picture) {
            item.goods_picture = item.goods_picture.replace(',', '');
        }
        return (
            <TouchableOpacity
                onPress={onPress}
                style={[styles.container, style]}
            >
                <ImageView
                    resizeMode={'cover'}
                    style={styles.goodsImageStyle}
                    source={item.goods_picture ? {uri: ServicesApi.QI_NIU_LINK + item.goods_picture} : Images.img_shop_default}
                />
                <View style={styles.itemContentView}>
                    <Text style={styles.itemName}>{item.goods_name}</Text>
                    <View style={styles.itemBottomView}>
                        <Text style={styles.itemPoint}>{item.goods_price}积分</Text>
                        <Button
                            title={'兑换'}
                            style={styles.itemConvertButton}
                            titleStyle={styles.itemConvertButtonText}
                            onPress={onPressSubmit}
                        />
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
}

const itemSize = (SCREEN_WIDTH - 45) / 2;

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        marginLeft: 15,
        borderRadius: 5,
        overflow: 'hidden',
        borderColor: "#ffa64f",
        borderWidth: Theme.minPixel,
    },
    goodsImageStyle: {
        width: itemSize,
        height: itemSize,
    },
    itemContentView: {
        paddingBottom: 5,
        borderTopWidth: 0,
    },
    itemName: {
        marginTop: 3,
        marginLeft: 5,
        fontSize: FontSize(16),
        color: "#333",
    },
    itemBottomView: {
        marginTop: 2,
        flexDirection: 'row',
        alignItems: 'center',
        marginHorizontal: 5,
        justifyContent: 'space-between',
    },
    itemPoint: {
        fontSize: FontSize(14),
        color: "#ffa64f",
    },
    itemConvertButton: {
        borderRadius: 2,
        backgroundColor: "#ffa64f",
        paddingHorizontal: 8,
        paddingVertical: 2,
    },
    itemConvertButtonText: {
        fontSize: FontSize(10),
        color: "#ffffff"
    },
});